<!DOCTYPE>
<html lang="en">
<head >
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="favicon.ico" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-form.js"></script>



    <!-- table导出成csv -->
    <script src="js/table2excel.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/bootstrap/bootstrap-table.min.js"></script>
    <script src="js/bootstrap/bootstrap-table-zh-CN.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/bootstrap/html5shiv.min.js"></script>
    <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
    <!--页面加载进度条-->
    <link href="css/pace/dataurl.css" rel="stylesheet" />
    <script src="js/pace/pace.min.js"></script>
    <script src="js/jquery.scrolltopcontrol/scrolltopcontrol.js" type="text/javascript"></script>
    <script src="js/jquery.extend.js" type="text/javascript"></script>
    <script src="js/default.js" type="text/javascript"></script>
    <script src="js/jqueryrotate.js" type="text/javascript"></script>

    <style>
        html,
        body {
            height: 100%;
        }

        .maincontent {
            background: #fff;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .sample {
            display: flex;
            flex-direction: row;
            margin: 20px auto;
            z-index: 10;
        }

        .sample>label {
            display: inline-block;
            height: 33px;
            line-height: 33px;
            color: rgba(0, 0, 0, .85);
        }

        .sample>h2 {
            height: 33px;
            line-height: 33px;
            color: rgba(0, 0, 0, .85);
            padding: 0;
            margin: 0;
            font-size: 18px;
            font-weight: bold;
        }

        .sample>select {
            height: 33px;
            line-height: 33px;
        }
        .sample>h1{
            display: flex;
            justify-content:center;
            font-size:1rem;
            padding:1rem;
            border:1px dashed#FFF;
            color:#FFF;
            width:28rem
        }

        iframe {
            flex: 1;
            min-height: 720px;
        }
    </style>
</head>

<body>


<form  id="addform"  enctype="multipart/form-data" method="post"  target="rfFrame">

    <div class="maincontent">
        <div class="sample">
            <label >选择结果导入模板：</label>
            <select id="typeName" style="width: 100px">
                <option value="csfy">实验室结果导入</option>
                <option value="huada">华大结果导入</option>
            </select>
            <a style="margin-left: 100px"></a>
            <label>多个文件&nbsp;<a style="color: red;font-size: 20px">*&nbsp;</a>: &nbsp;</label>
            <input type="file" name="fileList" id="fileList" multiple/>

        </div>


        <div style="width:220px; margin: 30px auto;" id="saveBtn">
            <button  id="submit"  style="width: 120px; height: 33px; border-radius: 2px; border-radius: 4px; background: rgb(23,134,184); color: #fff; outline: none; border-color: transparent;">
                保存
            </button>
        </div>


        <div style="text-align: center;word-wrap: break-word" >
            <p style="color: red;font-size: 20px;text-align: center" id="msg_id">
            </p>
            <div style="font-size: 20px;" id="showMes"></div>
        </div>
    </div>
    </div>
    </div>
</form>

<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>




</body>
<!--onclick="save();"-->
<script type="text/javascript">


    $('#addform').on('submit', function() {
        var fileName = $("#fileList").val();
        var typeName = $("#typeName").val();

        if(fileName==""){
            alert("请上传文件！");
            return false;
        }

        var fileType = fileName.split(".");
        if(fileType[fileType.length-1].toLocaleLowerCase() != "zip"){
            alert("文件类型错误,请导入.zip的压缩文件");
            return false;
        }

        var type = "华大结果导入";
        if(typeName === "csfy"){
            type = "实验室结果导入";
        }

        var file = fileName.split("\\");
        if (confirm("确认上传模板为：【" + type + "】，文件名为："+file[file.length-1]+"的文件吗?")) {
            $(this).ajaxSubmit({
                type: 'post',
                url: '/csfy/upload/fileUpload.do',
                data:{typeName:typeName},
                dataType: "json",
                success: function(res) {
                    if(res.code == 200){
                        //alert('上传成功！');
                        document.getElementById("msg_id").innerHTML= '上传成功';
                        $("#showMes").html('');
                        $("#addform").resetForm(); // 提交后重置表单
                    } else {
                        //alert('异常数据原因：'+res.msg);
                        $("#showMes").html('');
                        document.getElementById("msg_id").innerHTML= res.msg;
                    }
                },beforeSend:function(){
                    $("#showMes").html('正在执行上传的文件，请稍等...');
                }
            });
        } else {
            return false;
        }

    });


</script>
</html>